<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
<head>
<base href="<%=basePath%>">

<title>宠物新增</title>
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="static/p_house/house_index.css" />
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>
<style>
.webuploader-container {
	position: relative;
	top: 5px;
}
</style>
<body>
	<!-- 宠物 -->
	<form class="cmxform" id="petAddForm" method="post"
		action="customer/pet/addpet">
		<input type="hidden" id="petAdd_articleId">
		<div class="panel panel-default">
			<div class="panel-body ">
				<table cellpadding="10" cellspacing="5" class="mytable">
					<tr style="border-bottom:1px solid gray">
						<td colspan="6"><span class="style_btn">宠物信息</span></td>
					</tr>
					<tr>
						<td width="73" class="td-right">宠物名称</td>
						<td><input name="petName" id="petName" /></td>
						<td width="90" class="td-right">宠物颜色</td>
						<td><select class="js-example-basic-single" name="petColor"
							id="petColor" style="width:120px;">
								<option value="" selected="selected">请选择</option>
						</select></td>
						<td width="73" class="td-right">宠物类型</td>
						<td><select class="js-example-basic-single"
							style="width: 120px" name="petType" id="petType">
								<option value="" selected="selected">请选择</option>
						</select></td>
					</tr>
					<tr>
						<td width="73" class="td-right">登记证</td>
						<td><input name="registerCertificate"
							id="registerCertificate" /> <!-- 上传按钮 -->
							<div id='filePicker_cwdjz' style="display:none;">上传</div></td>
						<td width="90" class="td-right">健康免疫证</td>
						<td><input name="healthCertificate" id="healthCertificate" />
							<!-- 上传按钮 -->
							<div id='filePicker_jkz' style="display:none;">上传</div></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="3">
							<!-- 附件上传 宠物_登记证。。。--> <!-- 缩略图容器 -->
							<div id='list_cwdjz'></div>
						</td>
						<td colspan="3">
							<!-- 附件上传 宠物_健康免疫证。。。--> <!-- 缩略图容器 -->
							<div id='list_jkz'></div>
						</td>
					</tr>
				</table>
				<div id="changeRemark" hidden="hidden">
					<span
						style="display: inline-block;width: 73px;text-align: center;">变更说明</span>
					<textarea rows="3" cols="70" style="width: 65%" name="changeRemark"></textarea>
					<span style="color:red"> *</span>
				</div>
			</div>
			<!-- 专项申报 -->
		</div>

		<div style="width:100%;text-align:center; padding-top:20px">
			<div id="btn_div1" style="display:none;">
				<button class="btn btn-danger radius my-btn" onclick="savePet(0)"
					type="button">提交</button>
				<button class="btn btn-danger radius my-btn" onclick="savePet(1)"
					type="button">保 存</button>
				<a class="btn btn-default radius"
					onClick="resetForms('petAddForm');"> 重置 </a> <br />
			</div>
			<div id="btn_div2" style="display:none;">
				<!-- <button id="modifyBtn" type="button"
					class="btn btn-danger radius my-btn" onclick="savePet(3)">启用编辑</button> -->
				<button class="btn btn-danger radius my-btn " onclick="savePet(2)"
					type="button">保存修改</button>
				<a class="btn btn-default radius "
					onClick="resetForms('petAddForm');">重置</a>
			</div>
		</div>
		<!-- 隐藏域 -->
		<div style="display:none;">
			<input name="petId" id="entityId_id" value="${id }" />
		</div>
	</form>
	<!-- 表单结束 -->
	<script type="text/javascript">
		var petFlag; //查看、编辑状态
		$(function() {
			//事件类型下拉表填充数据
			initPetColor();
			initPetTypes();
			getFiles();
			//初始化表单
			mySubmit("petAddForm", initSavePet, petAddSuccess);
			
			initWebUpload("filePicker_cwdjz", "list_cwdjz", "宠物登记证", "petAdd_articleId", planStageSuccess, planStageErr);
			initWebUpload("filePicker_jkz", "list_jkz", "宠物健康免疫证", "petAdd_articleId", planStageSuccess, planStageErr);
			//上传按钮添加默认宽高
			$("div[id^='filePicker_'] div").css({
					"width" : "60px",
					"height" : "28px"
				});
	
			//获取编辑页面数据
			initPetMsg();
		});
		//填充宠物颜色列表
		function initPetColor() {
			$.ajax({
				url : "customer/pet/getPetColors", //请求的url地址
				dataType : "json", //返回格式为json
				async : false, //请求是否异步，默认为异步，这也是ajax重要特性 false:同步  true：异步
				type : "post", //请求方式
				success : function(data) {
					var html = "";
					var $s2 = $("#petAddForm").find("[name='petColor']");
					$.each(data, function(i, v) {
						if (v) {
							html = "<option value=\"" + v + "\">" + v + "</option>";
							$s2.append(html);
						}
					});
					$("#petAddForm #petColor").select2({
						tags : true
					});
				}
			});
		}
		//填充宠物类型列表
		function initPetTypes() {
			$.ajax({
				url : "customer/pet/getPetTypes", //请求的url地址
				dataType : "json", //返回格式为json
				async : false, //请求是否异步，默认为异步，这也是ajax重要特性
				type : "post", //请求方式
				success : function(data) {
					//请求成功时处理
					var html = "";
					var $s2 = $("#petAddForm").find("[name='petType']");
					$.each(data, function(i, v) {
						if (v) {
							html = "<option value=\"" + v + "\">" + v + "</option>";
							$s2.append(html);
						}
					});
					$("#petAddForm #petType").select2({
						tags : true
					});
				}
			});
		}
		//展示附件
		function getFiles() {
			getFileList($("#petAddForm input[name='petId']").val(), "宠物登记证", "#list_cwdjz", setRFL, imgPlus);
			getFileList($("#petAddForm input[name='petId']").val(), "宠物健康免疫证", "#list_jkz", setRFL, imgPlus);
			
		}
		function imgPlus(data) {
			$("#petAddForm .uploadcancel").css("display", "none");
			$.each(data, function(i, v) {
				//图片放大
				PostbirdImgGlass.init({
					domSelector : "#" + v.id + " img",
					animation : true,
					myDocument : window.parent.parent.parent
				});
			});
		}
		var rFileList = new Array(); //
		//设置待删除附件的值到集合中
		function setRFL(id, _this) {
			layer.confirm('删除该图片？', {
				title : '警告',
				icon : 0,
				shade : [ 0.1, '#fff' ]
			}, function() {
				rFileList.push(id);
				//删除指定缩略图
				$("#" + id).remove();
				layer.close(layer.index);
			});
		}
		//初始化赋值
		function initPetMsg() {
			var petId = $("#petAddForm").find("input[name='petId']").val();
			petFlag = '${petFlag}'; //查看、编辑状态
			if (petId == "") {
				//重置表单
				$("#petAddForm")[0].reset();
				 $("#petAddForm #btn_div2").hide();
				$("#petAddForm #btn_div1").show();
				//上传按钮水平排列
				$("div[id^='filePicker_']").css({"display":"inline-block","vertical-align":"bottom"});
			} else {
				$.post("customer/pet/getPetById", {
					id : petId
				}, function(data, status) {
					if (data != null) {
						$("#petAddForm input[name='petName']").val(data.petName);
						$("#petAddForm [name='petColor']").val(data.petColor).trigger("change");
						$("#petAddForm [name='petType']").val(data.petType).trigger("change");
						$("#petAddForm input[name='registerCertificate']").val(data.registerCertificate);
						$("#petAddForm input[name='healthCertificate']").val(data.healthCertificate);
						 if (petFlag == "1") {//查看
							//隐藏按钮
							$("#petAddForm #btn_div2").hide();
							$("#petAddForm #btn_div1").hide();
							$("#petAddForm").find("input,textarea").attr("readonly", true);
							$("#petAddForm").find(".addbtn,select,[type='file']").attr("disabled", true);
							$("#petAddForm div[id^='filePicker']").hide();
						} else {
							$("#petAddForm #btn_div2").show();
							$("#petAddForm #btn_div1").hide();
							$("#petAddForm .uploadcancel").show();
							$("#petAddForm #changeRemark").show();
							//上传按钮水平排列
							$("div[id^='filePicker_']").css({"display":"inline-block","vertical-align":"bottom"});
						} 
	
					}
				});
			}
		}
	
		var optPet;
		//optEvent操作字段，0：临时保存；1：新增；2：修改
		function savePet(val) {
			optPet = val;
			if (val == 3) {
				//解除锁定状态
				var index = layer.confirm('确定开启编辑状态？', {
					offset : '20%',
					shade : 0
				}, function() {
					//去除只读开启按钮编辑
					$("#petAddForm").find("input,textarea").attr("readonly", false);
					$("#petAddForm").find("select,.addbtn,[type='file']").attr("disabled", false);
					$("#petAddForm #modifyBtn").hide();
					$("#petAddForm .hidbtn").addClass("showbtn");
					$("#petAddForm .uploadcancel").show();
					$("#petAddForm div[id^='filePicker']").unbind("click").show();
					layer.close(index);
				});
			} else if(val == 2){
				var approvalCount = ${approvalCount};
				if(approvalCount <= 0 ){
					$("#petAddForm").submit();
				}else{
					layer.msg("此条数据已提交过审批，不能重复提交");
				}
			}else{
				$("#petAddForm").submit();
			}
		}
	
	
		function petAddSuccess(responseText) {
			layer.close(peti);
			if (responseText.success) {
				layer.alert("保存成功！", {
					offset : '20%',
					shade : [ 0.1, '#fff' ]
				}, function() {
					parent.location.reload();
					layer.close(peti);
				});
	
			} else {
				layer.alert('保存失败！');
			}
		}
		var peti;
		function initSavePet() {
			peti = layer.load(2);
			var fkcustomerId = parent.parent.$("#customerId").val();
			var fkroomId = parent.parent.$("#roomId").val();
			var petType = $("#petAddForm #petType").val();
			console.log(petType);
			var petName = $("#petAddForm #petName").val();
			var petColor = $("#petAddForm #petColor").val();
			var healthCertificate = $("#petAddForm #healthCertificate").val();
			var registerCertificate = $("#petAddForm #registerCertificate").val();
			var AccessoryCaList = $("#petAddForm #petAdd_articleId").val();
			var id = $("#petAddForm input[name='petId']").val();
			var changeRemark = $("#petAddForm [name='changeRemark']").val();
			if(optPet=="2" && changeRemark==""){
			layer.msg("变更说明不能为空");
			$("#petAddForm [name='changeRemark']").focus();
			layer.close(peti);
			return null;
		}
			return {
				id : id,
				fkroomId : fkroomId,
				fkcustomerId : fkcustomerId,
				petType : petType,
				petName : petName,
				petColor : petColor,
				AccessoryCaList : AccessoryCaList,
				registerCertificate : registerCertificate,
				healthCertificate : healthCertificate,
				AccessoryCaList : AccessoryCaList,
				opt : optPet,
				rFileList : rFileList,
				changeRemark:changeRemark
			}
		}
		//上传成功回调
		function planStageSuccess(file, response) {
			PostbirdImgGlass.init({
				domSelector : "td img",
				animation : true,
				myDocument : window.parent.parent.parent
			});
		}
		//上传失败回调
		function planStageErr(file, data) {
			//alert("上传失败回调");
		}
	</script>
</body>